<template>
  <div class="player" v-if="musicPlayList.length">
    <transition name="player">
      <div class="player-transition" v-show="fullScreen">
        <div class="bg-cover">
          <img  :src="currentSong.picUrl" alt="" />
          <!-- <img  src="@/assets/bg.png" alt="" /> -->
        </div>
        <div class="player-header">
          <svg-icon class="icon back" iconName="back" @click="cancelFullScreen"/>
          <div class="hgroup">
            <h2 class="title">{{ currentSong.name }}</h2>
            <h3>
              <span v-for="item in currentSong.song.artists" :key="item.name">
                {{ item.name }} &nbsp;
              </span>
            </h3>
          </div>
        </div>
        <div class="song-wrap">
          <!-- 水平滚动区域 -->
          <div class="song-wrap-l">
            <div class="record-disc">
              <div class="rotate" :class="isRotate">
                <img :src="currentSong.picUrl" :alt="currentSong.name" />
              </div>
            </div>
            <!-- 单行歌词 -->
            <p class="l-lyric">歌词歌词歌词歌词</p>
          </div>
          <div class="song-wrap-r"></div>
        </div>
        <div class="player-footer">
          <div class="player-progress">
            <span class="time playtime">{{formatTime(currentTime)}}</span>
           <!-- 进度条 -->
           <Progress :progressRatio="progressRatio" @progressMove="progressMove" @progressEnd="progressEnd"/>
            <span class="time endtime">{{formatTime(duration)}}</span>
          </div>
          <div class="player-controller">
            <SvgIcon class="icon" iconName="sequence" @click="changeMode"/>
            <SvgIcon class="icon" iconName="prev" @click="prevPlay"/>
            <SvgIcon class="icon" :iconName="icon" @click="togglePlayState"/>
            <SvgIcon class="icon" iconName="next" @click="nextPlay"/>
            <SvgIcon class="icon" iconName="heart" />
          </div>
        </div>
      </div>
    </transition>
    <!-- mini 播放器 -->
    <PlayerBar :progressRatio="progressRatio" :togglePlayState="togglePlayState" :nextPlay="nextPlay"/>
  </div>

  <!--         
    audio 在谷歌浏览器中都不允许媒体自动播放
        1. 静音
        2. 与用户有交互行为(就可以调用play方法播放音乐)
  -->
  <audio
    ref="audioRef"
    @canplay="audioReady"
    @timeupdate="timeUpdate"
    @ended="playEnd"
  ></audio>
</template>

<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import { getSongUrl } from "@/api/song"
import { formatTime } from "@/utils/fromatTime"
import Progress from './components/Progress.vue'
import PlayerBar from './components/PlayerBar.vue'
import initPlayControl from "./js/playController"

let store = useStore()
let audioRef = ref(null)
let duration = ref(0) // mp3的总时长
let currentTime=ref(0) // 当前时长
let { togglePlayState,nextPlay,prevPlay,changeMode} = initPlayControl(audioRef)

// vuex
let musicPlayList = computed(() => store.state.musicPlayList)
let currentSong = computed(() => store.getters.currentSong)
let fullScreen = computed(() => store.state.fullScreen)
let playing = computed(() => store.state.playing)

let icon = computed(() =>playing.value?"pause" : "play")  // 播放 / 暂停 图标
let isRotate = computed(()=> playing.value ? "play" : "pause") // 是否旋转唱片

let progressRatio =computed(()=>{
    if(!audioRef) return
    return currentTime.value / duration.value
})
console.log('currentSong',currentSong);

// 监听当前要播放的歌曲对象的变化
watch(currentSong, (newSong) => {
  // 获取mp3的url
  getSongUrl(newSong.id)
  .then(res=>{
    const musicUrl = res.data.data[0].url
    // 设置audio
    audioRef.value.src = musicUrl
    audioRef.value.play()
    store.commit("setPlaying", true)
  })
  .catch(err=>{
    console.log("MP3获取失败", err);
  })
})

// 取消播放器的全屏状态
function cancelFullScreen(){
  store.commit("setFullScreen", false)
}

// 当audio准备就绪
function audioReady(){
  // 获取mp3的总时长
  duration.value = (audioRef.value.duration)
}
// 当播放事件发生变化
function timeUpdate(){
    // console.log('11',audioRef);
    currentTime.value=audioRef.value.currentTime
}
// 当音乐播放结束时
function playEnd(){
  audioRef.value.currentTime = 0
  // 判断播放模式
  if(playMode.value === 1){
    // 单曲循环
  }else{
    // 播放下一首
    nextPlay()
  }
}

// 在进度条上移动时
function progressMove(newRatio){
  // 停止播放
  if(playing.value) store.commit("setPlaying", false)
  // 当前时间 = 比例值 * 总时长
  audioRef.value.currentTime = currentTime.value = newRatio * duration.value

}

// 结束在进度条上的操作
function progressEnd(newRatio){
  // 当前时间 = 比例值 * 总时长
  audioRef.value.currentTime = currentTime.value = newRatio * duration.value
  // 继续播放
  if(!playing.value) store.commit("setPlaying", true)
}
</script>
<style lang="less" scoped>
.player{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 199;
  .player-transition{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: @main-background;
  }
  .bg-cover{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.6;
    filter: blur(30px);
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .player-header {
    position: relative;
    padding-top: 10px;
    text-align: center;
    .icon.back {
      position: absolute;
      top: 0;
      left: 6px;
      z-index: 50;
      padding: 9px;
      width: 22px;
      height: 22px;
      color: #f0d0e0;
      transform: rotate(-90deg);
    }
    & > * {
      width: 50%;
      margin: 0 auto;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      line-height: 2em;
    }
    h2 {
      font-size: @font-size-large;
      color: #fff;
    }
    h3 {
      font-size: @font-size-medium;
      color: #969595;
    }
  }
  .song-wrap{
    .song-wrap-l {
      padding-top: 20px;
      //唱片圆盘
      .record-disc {
        overflow: hidden;
        .rotate {
          position: relative;
          overflow: hidden;
          margin: 0 auto;
          width: 70vw;
          height: 70vw;
          border-radius: 50%;
          border: 10px solid rgba(255, 255, 255, 0.1);
          animation: rotate 20s linear infinite;
          &.play {
            animation-play-state: running;
          }
          &.pause {
            animation-play-state: paused;
          }
          img {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
          }
        }
      }
      // 歌词
      .l-lyric {
        overflow: hidden;
        width: 80%;
        margin: 30px auto 0 auto;
        text-align: center;
        line-height: 2em;
        font-size: @font-size-medium;
        color: @dark-color;
      }
    }
  }
  .player-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    width: 80%;
    height: 100px;
    margin: 0 auto;
    // background-color: #fff;
    .player-progress {
      display: flex;
      align-items: center;
      width: 100%;
      margin: 0 auto;
      padding: 10px 0;
      color: #fff;
      .playtime {
        margin-right: 4px;
      }
      .endtime {
        margin-left: 4px;
      }
      .p-progress-inner {
        position: relative;
        flex: 1;
        height: 4px;
        background-color: rgba(0, 0, 0, 0.3);
        .p-progress-load {
          position: absolute;
          height: 100%;
        }
        .p-progress-play {
          position: absolute;
          width: 30px;
          height: 100%;
          background: #f0d0e0;
        }
        // 滑块
        .slider {
          position: absolute;
          right: 0;
          top: 50%;
          width: 16px;
          height: 16px;
          border: 3px solid #fff;
          box-sizing: border-box;
          border-radius: 50%;
          background: @light-color;
          transform: translateY(-50%);
        }
      }
    }
  }
  .player-controller{
    display: flex;
    height: 60px;
    align-items: center;
    .icon {
      flex: 1;
      width: 30px;
      height: 30px;
      color: @light-color;
    }
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
